<template>
  <div class="custom_video_view">
    <Swipe
      :item="
        $Plugins.extend(
          {},
          {
            vertical: true,
            height: screenHeight,
            showBackground: false,
            speed: 0,
            showDock: false,
            isTask: true,
            data: item.data,
          }
        )
      "
    >
      <template v-slot:swipeItem="{ swipeItem, item, index }">
        <div class="custom_video_view_item" @click="playClickHandle">
          <div>
            <video
              :id="'swipeVideo_' + index"
              :src="swipeItem.src"
              :poster="swipeItem.poster"
              loop
              preload
              muted
              :width="screenWidth"
              :height="screenHeight"
              x5-playsinline=""
              playsinline=""
              webkit-playsinline=""
              @pause="pauseHandle"
              @play="playHandle"
              @canplay="canplayHandle"
              @timeupdate="timeupdateHandle"
              class="custom_video_view_item_video"
            ></video>
          </div>
          <div class="custom_video_view_item_content">
            <h1>{{ swipeItem.title }}</h1>
            <p>{{ swipeItem.desc }}</p>
          </div>
          <div class="custom_video_view_item_value">
            {{ currentTime }} / {{ durationTime }}
          </div>
          <van-icon name="pause-circle-o" v-if="paused" />
        </div>
      </template>
    </Swipe>
  </div>
</template>
<script>
export default {
  name: "videoView",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    Swipe: () =>
      import(/* webpackChunkName:'swipe' */ "../../components/swipe/swipe"),
  },
  data() {
    return {
      screenHeight: screen.height,
      screenWidth: screen.width,
      preVideo: null,
      currentVideo: null,
      paused: false,
      played: false,
      currentTime: "00:00:00",
      durationTime: "00:00:00",
    };
  },
  beforeDestroy() {
    this.currentVideo && this.currentVideo.pause();
  },
  mounted() {
    this.$on("changeHandle", this.changeHandle);
    this.$nextTick(() => {
      if (!this.currentVideo)
        this.currentVideo = document.getElementById("swipeVideo_0");
      this.currentVideo && this.currentVideo.play();
    });
  },
  methods: {
    timeupdateHandle(e) {
      this.currentTime = this.$Plugins.getTime(e.srcElement.currentTime);
      this.durationTime = this.$Plugins.getTime(e.srcElement.duration);
    },
    canplayHandle(e) {
      console.log("canplay", e.srcElement.id);
    },
    pauseHandle(e) {
      console.log("pause", e.srcElement.paused, e.srcElement.id);
      this.paused = e.srcElement.paused;
      this.played = e.srcElement.played;
    },
    playHandle(e) {
      console.log("play", e.srcElement.played, e.srcElement.id);
      this.paused = e.srcElement.paused;
      this.played = e.srcElement.played;
    },
    playClickHandle() {
      if (!this.currentVideo)
        this.currentVideo = document.getElementById("swipeVideo_0");
      this.currentVideo.paused
        ? this.currentVideo.play()
        : this.currentVideo.pause();
    },
    changeHandle(index) {
      console.log(index);
      this.preVideo = this.currentVideo;
      this.currentVideo = document.getElementById("swipeVideo_" + index);
      this.preVideo && this.preVideo.pause();
      this.currentVideo.play();
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_video_view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: #000;
  .custom_video_view_item {
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    .custom_video_view_item_value {
      position: absolute;
      bottom: (20 / @base);
      left: 5%;
      right: 5%;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
      font-size: (12 / @base);
    }
    .custom_video_view_item_content {
      position: absolute;
      top: (56 / @base);
      left: 5%;
      right: 5%;
      text-align: left;
      color: #fff;
      font-size: (12 / @base);
      h1 {
        font-size: (14 / @base);
        font-weight: 400;
      }
      p {
      }
    }
    .custom_video_view_item_video {
      object-fit: contain;
    }
    .van-icon {
      position: absolute;
      color: rgba(255, 255, 255, 0.8);
      font-size: (50 / @base);
    }
  }
}
</style>
